<template>
  <div>
    <div class="sitM1">
      <el-button type="primary" class="sitM2"  disabled>大荧幕</el-button>
      <div  class="sitM3" v-if="isReload">
        <div v-for="i in choseCinema.crow" v-bind:key="i">
          <el-row type="flex" class="sitM24">
            <el-col
              :span="3"
              v-for="j in choseCinema.ccolumn"
              v-bind:key="j"
              class="sitM4"
            >
              <el-button
                :type="getType(i, j)"
                class="sitM5"
                :icon="Avatar"
                @click="xuanze(i, j)"
              ></el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="sitM6">
      <span class="sitM7">您已选择：</span>
      <div class="sitM8">
        <div class="sitM9">
          <el-tag
            v-for="tag in zsize"
            :key="tag"
            :disable-transitions="false"
            @close="deletTag(tag - 1)"
            closable
          >
            {{ zxzi[tag - 1] }}排{{ zxzj[tag - 1] }}座
          </el-tag>
        </div>
        <div class="sitM10">
          <span class="sitM11"><b>总价：</b>{{ zj }}元</span><br />
          <span class="sitM11"><b>是否会员优惠：</b>{{ isVip }}</span
          ><br />
          <el-button type="success" @click="pay">立即结算</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="支付界面" v-model="dialogTableVisible" width="80%">
      <img :src="imgsrc" class="sitM12" />
      <el-button type="success" @click="payPlan" round>付费成功</el-button>
      <el-button type="danger" @click="outPay" round>付费失败</el-button>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref, nextTick, defineExpose } from 'vue'
import router from '@/router'
import { Avatar } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import '@/assets/scss/userCom/Phone/sit.scss'
const choseCinema = reactive({ cid: 1, cname: '一号厅', crow: 7, ccolumn: 8 })
const isReload = ref(true)
const chosePlan = ref()
const zsize = ref(0)
const yxz = ref([])
const zxzi = ref([])
const zxzj = ref([])
const zj = ref(0)
const dialogTableVisible = ref(false)
const imgsrc = require('@/assets/img/收款.jpg')
const order = reactive({
  uid: '',
  pid: '',
  ostate: '未过期',
  buyTime: null,
  price: 0.0,
  orow: -1,
  ocolumn: -1
})
const panduan = (i, j) => {
  for (let k = 0; k < yxz.value.length; k = k + 1) {
    if (yxz.value[k].orow === i && yxz.value[k].ocolumn === j) {
      return 1
    }
  }
  for (let k = 0; k < zxzi.value.length; k = k + 1) {
    if (zxzi.value[k] === i && zxzj.value[k] === j) {
      return 2
    }
  }
  return 0
}
const getType = function (i, j) {
  if (panduan(i, j) === 1) {
    return 'danger'
  } else if (panduan(i, j) === 0) {
    return 'info'
  } else {
    return 'success'
  }
}
const jiazai = () => {
  isReload.value = false
  nextTick(() => {
    isReload.value = true
  })
}
const xuanze = (i, j) => {
  if (zxzi.value.length >= 6) {
    alert('您的账号最多可以购买该场次6张票')
    return
  }
  var f = 0
  for (var k = 0; k < yxz.value.length; k = k + 1) {
    if (yxz.value[k].orow === i && yxz.value[k].ocolumn === j) {
      alert('该座位已经被其他用户选择！')
      f = 1
      break
    }
  }
  if (f === 0) {
    let f1 = 0
    for (let k1 = 0; k1 < zxzi.value.length; k1 = k1 + 1) {
      if (zxzi.value[k1] === i && zxzj.value[k1] === j) {
        alert('该座位您已经选择！')
        f1 = 1
        break
      }
    }
    if (f1 === 0) {
      const k2 = zxzi.value.length
      zxzi.value[k2] = i
      zxzj.value[k2] = j
      zsize.value = k2 + 1
      if (JSON.parse(sessionStorage.getItem('isVip')) === 'YES') {
        zj.value = zj.value + parseFloat(chosePlan.value.price) * 0.9
      } else {
        zj.value = zj.value + parseFloat(chosePlan.value.price)
      }
      jiazai()
    }
  }
}
const deletTag = (i) => {
  zxzi.value.splice(i, 1)
  zxzj.value.splice(i, 1)

  if (JSON.parse(sessionStorage.getItem('isVip')).toString() === 'YES') {
    zj.value -= parseFloat(chosePlan.value.price) * 0.9
  } else {
    zj.value -= parseFloat(chosePlan.value.price)
  }
  zsize.value = zsize.value - 1
}
const pay = () => {
  dialogTableVisible.value = true
}
const payPlan = () => {
  if (sessionStorage.getItem('username') === null) {
    ElMessage({
      showClose: true,
      message: '您还未登录！请先登录！',
      type: 'error'
    })
  } else {
    let str = '添加成功'
    for (let k = 0; k < zsize.value; k = k + 1) {
      order.uid = JSON.parse(sessionStorage.getItem('uid'))
      order.pid = chosePlan.value.pid
      if (JSON.parse(sessionStorage.getItem('isVip')).toString() === 'YES') {
        order.price = parseFloat(chosePlan.value.price) * 0.9
      } else {
        order.price = parseFloat(chosePlan.value.price)
      }
      order.orow = zxzi.value[k]
      order.ocolumn = zxzj.value[k]
      axios.post('api/order/addOrder', order).then((res) => {
        if (res.data === '添加失败') {
          str = res.data
        }
      })
    }

    if (str === '添加成功') {
      alert('已成功购买！')
    }

    router.go(0)
  }
}
const outPay = () => {
  dialogTableVisible.value = false
}
defineExpose({ choseCinema, chosePlan, yxz, zxzi, zxzj, zj, zsize })
</script>
